<script setup lang="ts">
import { followUser, searchUserList } from '@/api/user';
import { User } from '@/api/user/type';
import YHeader from '@/components/YHeader.vue';
import { router } from '@/router';
import { onMounted, ref } from 'vue';

const keyword = ref('')

const loading = ref(true)
const userList = ref([] as User[])
const finished = ref(true)

onMounted(() => {
    onSearch('');
})

const onSearch = (value: string) => {
    loading.value = true;
    finished.value = false;
    searchUserList(value).then((res) => {
        userList.value = res.data as User[];
        loading.value = false;
        finished.value = true;
    })
}

const onFollow = (userId: string) => {
    followUser(userId);
}

const toUserIndex = (userId: string) => {
    router.push({
        name: "UserIndex",
        query: {
            "id": userId
        }
    });
}

</script>

<template>
    <div class="container">
        <YHeader></YHeader>
        <div class="content">
            <van-search v-model="keyword" placeholder="请输入搜索关键词" @search="onSearch"
                background="white" shape="round"/>
            <van-list
                class="list"
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
            >
                <div class="item" v-for="item in userList" @click="toUserIndex(item.id)">
                    <div class="left" @click="">
                        <div class="avatar">
                            <van-image :src="item.avatar" round/>
                        </div>
                        <div class="center">
                            <span>{{item.nickname}}</span>
                            <p class="text">ID：{{item.id}}</p>
                        </div>
                    </div>
                    <div class="right">
                        <van-button @click="onFollow(item.id)" style="height: 42%; width: 90%;" :round="true" plain icon="plus"
                            size="small" type="primary">关注</van-button>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    .content {
        height: 100%;
        .list {
            display: flex;
            flex-direction: column;
            align-items: center;
            .item {
                width: 90%;
                justify-content: center;
                background-color: white;
                height: 70px;
                display: flex;
                margin-top: 2%;
                border-radius: 15px;
                .left {
                    display: flex;
                    width: 75%;
                    .avatar {
                        width: 20%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 3%;
                    }
                    .center {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        .text {
                            margin: 0;
                            color: rgba(122, 120, 116, 0.438);
                        }
                    }
                }
                .right {
                    justify-content: right;
                    display: flex;
                    align-items: center;
                    width: 20%;
                    padding-right: 2%;
                }
            }
        }
    }
}
</style>